import { Component, ElementRef, ViewChild } from '@angular/core';
import { ICellEditorAngularComp } from '@ag-grid-community/angular';

@Component({
  selector: 'apes-cell-input',
  template: `
    <div (mouseout)="onMouseout()">
      <ng-container *ngIf="!showPopover">
        <input apes-input
               [ngStyle]="{width:'100%'}"
               #input
               [placeholder]="placeholder"
               [(ngModel)]="inputValue"
               (keydown)="onKeyDown($event)">
      </ng-container>

      <ng-container *ngIf="showPopover">
        <input apes-input
               [ngStyle]="{width:'100%'}"
               #input
               [placeholder]="placeholder"
               [(ngModel)]="inputValue"
               (keydown)="onKeyDown($event)"
               apes-popover
               [apesPopoverContent]="inputTemplate"
               apesPopoverPlacement="topLeft"
               apesPopoverTrigger="focus">
        <ng-template #inputTemplate>
          <div class="apes-cell-inputPopover">
            {{inputValue}}
          </div>
        </ng-template>
      </ng-container>
    </div>
    <!--    (blur)="onBlur()"-->
  `,
  styles: [],
})
export class EditorInputComponent implements ICellEditorAngularComp {

  placeholder: any = '';
  inputValue: any;
  params: any;
  ctx: any;
  showPopover: boolean = false;
  @ViewChild('input', { static: false }) input: ElementRef;

  constructor() {
  }

  agInit(params: any): void {
    this.params = params;
    // this.api = params.api;
    // this.downFormatter = params.downFormatter;
    // this.valueFormatter = params.valueFormatter;

    // let placeholder;
    // if (this.params.hasOwnProperty('colDef')) {
    //   placeholder = this.params.colDef.placeholder;
    // } else {
    //   placeholder = this.params['column']['colDef'].placeholder;
    // }
    // if (placeholder) {
    //   this.placeholder = placeholder;
    // }

    let colDef = params.hasOwnProperty('colDef') ? params.colDef : params.column['colDef'];
    this.placeholder = colDef['placeholder'] ? colDef['placeholder'] : '';
    this.showPopover = colDef['showPopover'] ? colDef['showPopover'] : false;

    this.inputValue = params.value;
    this.ctx = params.context;
  }

  extend(data: any) {
    let result = {};
    for (let key in data) {
      let value = data[key];
      if (key === 'context') {
        result['ctx'] = value;
      } else {
        result[key] = value;
      }
    }
    return result;
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.input.nativeElement.focus();
    }, 300);
  }

  isPopup(): boolean {
    return false;
  }

  getValue(): any {
    let result;
    if (!this.inputValue) {
      result = '';
      this.params.value = '';
    } else {
      result = this.inputValue;
      this.params.value = this.inputValue;
    }
    return result;
  }

  // refresh(params: any): boolean {
  //     return undefined;
  // }

  onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key === 38 || key === 40) {
      this.preventDefaultAndPropagation(event);
    } else if (key == 13 || key == 9) { // enter
      // in a proper application you'd probably want to inform the user that an input is blank'
      /**/
      this.inputValue = event.target.value;
      this.params.value = event.target.value;
      this.input.nativeElement.blur();
    }
  }

  onMouseout(): void {
    this.input.nativeElement.blur();
    this.params.value = this.inputValue;
    this.params.stopEditing(false);
  }

  private preventDefaultAndPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
  }
}
